<% @page_title = "Add people" %>

<% content_for :header do %>
  <div class="header__actions header__actions--start">
    <%= back_link_to "Account Settings", account_settings_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
  </div>
<% end %>

<div class="panel panel--wide shadow center flex flex-column gap" style="view-transition-name: <%= dom_id(@join_code) %>">
  <header>
    <h2 class="txt-large margin-none font-weight-black"><%= @page_title %></h2>
    <p class="txt-medium margin-none">Share the link below to invite people to this account</p>
  </header>

  <% url = join_url(code: @join_code.code, script_name: Current.account.slug) %>
  <div class="flex align-center gap-half">
    <input type="text" class="input flex-item-grow" value="<%= url %>" readonly>

    <% if Current.user.admin? %>
      <%= button_to account_join_code_path, method: :delete, class: "btn btn--circle txt-small", data: {
            turbo_confirm: "Are you sure you want to generate a new link? The previous code will stop working." } do %>
        <%= icon_tag "refresh" %>
        <span class="for-screen-reader">Generate a new code</span>
      <% end %>
    <% end %>
  </div>

  <div class="center flex flex-wrap justify-center align-center gap">
    <%= tag.button class: "btn btn--link", data: {
          controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
          copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url } do %>
      <%= icon_tag "copy-paste" %>
      <span class="txt-nowrap">Copy invite link</span>
    <% end %>

    <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
      <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
        <%= icon_tag "qr-code" %>
        <span>Get QR code</span>
      <% end %>

      <dialog class="dialog panel shadow" data-dialog-target="dialog">
        <p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>

        <%= qr_code_image(url) %>

        <form method="dialog" class="margin-block-start flex justify-center">
          <button class="btn">
            <span>Done</span>
          </button>
        </form>
      </dialog>
    </div>
  </div>

  <footer class="txt-small">
    <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">

    <p class="margin-none <%= "txt-negative" if !@join_code.active? %>">
      This code has been used <%= @join_code.usage_count %>/<%= @join_code.usage_limit %> times
      (<%= @join_code.active? ? @join_code.usage_limit - @join_code.usage_count : "none" %> remaining)

      <% if Current.user.admin? %>
        <%= link_to edit_account_join_code_path, class: @join_code.active? ? "txt-link" : "txt-negative txt-underline" do %>
          <span>Change limit</span>
        <% end %>
      <% end %>
    </p>
  </footer>
</div>
